<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  components: {},
  name: "chartlinechartquanwang1",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: ""
    };
  },
  computed: {},
  watch: {},
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;

    setInterval(() => {
      this.loadData();
    }, 5000);
  },
  methods: {
    loadData() {
      let _this = this;

      var scale = this.$root.setting.scale;

      var g_his_stime = 1579150860000; //2020.01.16 13:01:00
      var g_his_etime = 1579151160000; //2020.01.16 13:06:00 13:05:00有一条数据

      let pidArr20 = [];
      let pidArr8 = [];
      let heatPlantInfoMap = new Map();
      axios.get("/engipower/manage/manageHeatPlant.do").then(res => {
        let data = res.data;
        for (var i = 0; i < data.length; i++) {
          console.log(data[i]["pid"]);
          console.log(data[i]);

          heatPlantInfoMap.set(data[i]["pid"], data[i]);
          if (data[i]["state"] == 1 || data[i]["state"] == "1") {
            //投运
            switch (
              data[i]["sourceType"] //1:外围电厂 2：隔压占 3：热电厂 4：燃气锅炉
            ) {
              case 1:
                pidArr20.push(data[i]["pid"]);
                break;
              case 2:
              case 3:
              case 4:
                if (data[i]["pid"] != "43622") {
                  //【2020-1-20】二马路不需要展示
                  pidArr8.push(data[i]["pid"]);
                }
                break;
            }
          }
        }

        this.$store.state.daping.manageHeatPlant = {
          pidArr20: pidArr20,
          pidArr8: pidArr8,
          heatPlantInfoMap: heatPlantInfoMap
        };

        var heatPlantInfoMap = this.$store.state.daping.manageHeatPlant[
          "heatPlantInfoMap"
        ];
        var pidArr20 = heatPlantData["pidArr20"];
        var pidArr8 = heatPlantData["pidArr8"];
        var basicData = heatPlantInfoMap.get(pidArr20[x]);
        var markLineData = basicData.buyHeat ? basicData.buyHeat : null;

        let seriesData = [];
        let markLineSeriesData = [];
        let queryJson = {
          queries: [
            {
              metric: "*",
              schema: "statistic"
            }
          ],
          table: "pipenet",
          type: "history",
          startTime: g_his_stime,
          endTime: g_his_etime,
          orderBy: "aligntime",
          search: "col_name='sa_003qc'"
        };
        axios.post("/open/queryDb", queryJson).then(res => {
          if (res.data["200"]) {
            //如果有则获取200中的结果
            var pipenetData = res.data["200"];
            for (var i in pipenetData) {
              // xData.push(pipenetData[i]["aligntime"].substring(5, pipenetData[i]["aligntime"].length - 3));
              // yData.push(Number(pipenetData[i]["value"] / 3.6).toFixed(0));
              if (pipenetData[i]["value"] || pipenetData[i]["value"] == 0) {
                seriesData.push([
                  pipenetData[i]["aligntime"],
                  Number(pipenetData[i]["value"] / 3.6).toFixed(0)
                ]);
              }
              // markLineSeriesData.push([pipenetData[i]["aligntime"], markLineData]);
            }
          } else {
            //如果没有则提示错误信息 置空对象
            console.log("参数有误", data);
          }

          this.options = {
            title: {
              text: "全网供热量(MW)",
              textStyle: {
                color: "#fff",
                fontSize: 36 * scale,
                fontWeight: "bold"
              }
            },
            tooltip: {
              show: true,
              trigger: "axis",
              // formatter: "{a} {b}: {c} MW",
              formatter: (params, ticket, callback) => {
                //【2019年11月21日】把markline的数据也放上去 显示差值
                var html =
                  params[0].axisValueLabel +
                  "<br>" +
                  params[0].marker +
                  params[0].seriesName +
                  " : " +
                  params[0].value[1];
                if (markLineData) {
                  html +=
                    "<br>" +
                    params[0].marker +
                    "买热量 : " +
                    markLineData +
                    "<br>" +
                    params[0].marker +
                    "差值:" +
                    (params[0].value[1] - markLineData);
                }
                return html;
              },
              textStyle: {
                fontWeight: "normal",
                fontSize: 30 * scale
              }
            },
            grid: {
              //统计图距离边缘的距离
              bottom: "10%",
              top: "20%",
              left: "5%",
              right: "5%",
              containLabel: true
            },
            xAxis: [
              {
                //x轴
                type: "time", //数据类型为不连续数据category
                boundaryGap: false, //坐标轴两边是否留白
                minInterval: 3600 * 1 * 1000,
                axisLine: {
                  //坐标轴轴线相关设置。数学上的x轴
                  show: true,
                  lineStyle: {
                    color: "#F5F5F5" //x轴颜色
                  }
                },
                axisLabel: {
                  //坐标轴刻度标签的相关设置
                  textStyle: {
                    color: "#F5F5F5",
                    fontSize: 30 * scale
                  },
                  formatter: function(value, index) {
                    // 格式化成分:秒，只在0点刻度显示日期和时间
                    var date = new Date(value);
                    var hour = date.getHours();
                    var minute = date.getMinutes();

                    hour = hour < 10 ? "0" + hour : hour;
                    minute = minute < 10 ? "0" + minute : minute;

                    if (hour == "00" && minute == "00") {
                      return (
                        date.getMonth() +
                        1 +
                        "-" +
                        date.getDate() +
                        " " +
                        hour +
                        ":" +
                        minute
                      ); //日期是getDate 星期几是getDay
                    }
                    return hour + ":" + minute;
                  }
                },
                axisTick: {
                  show: false
                }, //刻度点数轴
                splitLine: {
                  show: false
                } //是否显示分隔线。默认数值轴显示，类目轴不显示。
                // data: xData,
              }
            ],
            yAxis: [
              {
                //y轴的相关设置
                type: "value", //y轴数据类型为连续的数据
                // name:"单位:MW",
                splitLine: {
                  //y轴上的y轴线条相关设置
                  show: false
                },
                axisLine: {
                  //y轴的相关设置
                  show: true,
                  lineStyle: {
                    color: "#F5F5F5" //y轴颜色
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 30 * scale
                  }
                },
                axisTick: {
                  show: false
                }, //刻度点数轴
                max: markLineData
                  ? Number(markLineData * 1.4).toFixed(0)
                  : "dataMax"
              }
            ],
            series: [
              {
                name: "供热量",
                type: "line", //统计图类型为折线图
                smooth: true, //是否平滑曲线显示
                symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
                lineStyle: {
                  //线条的相关设置
                  normal: {
                    color: "#E2D054" // 线条颜色
                  }
                },
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    color: "#E2D054" //tooltip里点的颜色
                  }
                },
                markLine: {
                  symbol: "none", //去掉警戒线最后面的箭头
                  label: {
                    fontSize: 20 * scale,
                    position: "middle" //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                    // formatter: '{a}: {c}',
                  },
                  data: [
                    {
                      silent: false, //鼠标悬停事件  true没有，false有
                      lineStyle: {
                        //警戒线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#E2D054",
                        width: 5
                      },
                      yAxis: markLineData //【2019年11月6日】从数据库读取
                    }
                  ]
                },
                areaStyle: {
                  //区域填充样式
                  normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(226,208,84,0.8)"
                        },
                        {
                          offset: 1,
                          color: "rgba(251,246,208,0.06)"
                        }
                      ],
                      false
                    ),

                    shadowColor: "rgba(226,208,84,0.8)", //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  }
                },
                data: seriesData
              }
              // ,{
              //     name: '买热量',
              //     type: 'line',//统计图类型为折线图
              //     smooth: true, //是否平滑曲线显示
              //     symbolSize: 0,//数据点的大小，[0,0]//b表示宽度和高度
              //     lineStyle: {//线条的相关设置
              //         normal: {
              //             color: "#E2D054",   // 线条颜色
              //             width: 5,

              //         }
              //     },
              //     itemStyle: {
              //         normal: {
              //             borderWidth: 5,
              //             color: "#E2D054",//tooltip里点的颜色
              //         }
              //     },

              //     data: markLineSeriesData,
              // }
            ]
          };

          this.myChart.setOption(this.options);
        });
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>